@import "../../variable.less";
@acolor:#5e69ad;
@detailcolor:#999999;
.toggle{
  display: inline-block;
  position: relative;
  border: 1px solid @linecolor;
  padding: 3px 5px;
  cursor: pointer;
  .arrow-down{
    display: inline-block;
    transform: rotate(0);
    transition: all .5s ease;
  }
  .icon-sale{
    color: @acolor;
    font-size: 16px;
  }
  &.active{
    border-color: @inputcolor;
    &:after{
      content: '';
      position: absolute;
      bottom: -3px;
      right:0;
      left:0;
      height: 6px;
      background: @whitecolor;
    }
    .arrow-down{
      color:@inputcolor;
      transform: rotate(180deg);
    }
    .content{
      display: block;
      position: absolute;
      left: -1px;
      top: 28px;
      li{
        margin-top: 10px;
        .youhui{
          background: @inputcolor * 0.8;
          color: @whitecolor;
          padding: 2px 5px;
        }
        .a-color{
          i{
            color: @detailcolor;
          }
        }
      }
      li.active {
        span{
          span+span{
            color: @inputcolor;
          }
        }
        .service-detail{
          visibility: visible;
        }
      }
      .service-detail{
        visibility: hidden;
        i{
          font-size: 0.8rem;
        }
      }
      a:hover{
        color: @hovercolor;
      }
    }
  }
  .content{
    display: none;
    width: 230px;
    background: @whitecolor;
    padding: 10px;
    border: 1px solid @linecolor;
  }
}
